<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="static/echarts.min.js"></script>
<script src="static/jquery-3.2.1.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 1000px;height:900px;"></div>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		// 显示标题，图例和空的坐标轴
		myChart.showLoading();// 加载动画
		// 异步加载数据
		$.post('servlet/Brands').done(function(datafromback) {//jQuery触发ajax 从后台异步获取数据
			var data = eval( datafromback ); //解析json
			myChart.hideLoading();
			//console.log(data)
			function onedaydata(date){
			var res=[];
			for(var i=0;i<data.length;i++){
			
			res.push({
                name: data[i].phoneModel.concat("day0"+date),
                value: data[i]["day0"+date]
               
            });
			}
			//console.log(res);
			return res;
			}
			function legenddata(){
			var res=[];
			for(var i=0;i<data.length;i++){
			
			res.push(
			data[i].phoneModel.concat("day01"),data[i].phoneModel.concat("day02"),data[i].phoneModel.concat("day03"),data[i].phoneModel.concat("day04"),data[i].phoneModel.concat("day05"),data[i].phoneModel.concat("day06"),data[i].phoneModel.concat("day07")
			);
			}
			//console.log(res);
			return res;
			}

option = {
     visualMap: {
       show: false,
        min: 50,
        max: 2500,
        inRange: {
            colorLightness: [0.3, 0.9]
        }
    },
   /*   radiusAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        z: 10
    },
    angleAxis: {
    },
     polar: {
    },*/
     legend: { 
  // pageFormatter:'1/20',
      type: 'scroll',
        orient: 'horizontal', 
        left: 'center', 
        bottom: 0, 
       data:legenddata()
        }, 
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',

                }
            },
            
    series: [
        {
            name:'日访问量',
            type:'pie',
            radius: ['20%', '30%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        color:"black",
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                   show: false
                }
            },
            data:onedaydata(1)
        },
                {
            name:'日访问量',
            type:'pie',
            radius: ['35%', '40%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                    color:"black",
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                   show: false
                }
            },
            data:onedaydata(2)
        },
                {
            name:'日访问量',
            type:'pie',
            radius: ['45%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                
                    show: false,
                    position: 'center'
                },
                emphasis: {
                color:"black",
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                   show: false
                }
            },
            data:onedaydata(3)
        },
                {
            name:'日访问量',
            type:'pie',
            radius: ['55%', '60%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                color:"black",
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                   show: false
                }
            },
            data:onedaydata(4)
        },
                {
            name:'日访问量',
            type:'pie',
            radius: ['65%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                color:"black",
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                   show: false
                }
            },
            data:onedaydata(5)
        },
                {
            name:'日访问量',
            type:'pie',
            radius: ['75%', '80%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                color:"black",
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                   show: false
                }
            },
            data:onedaydata(6)
        },
                {
            name:'日访问量',
            type:'pie',
            radius: ['85%', '90%'],
            avoidLabelOverlap: false,
            label: {
                emphasis: {
                color:"black",
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            data:onedaydata(7)
        }
        
        
        
        
        

    ]
};

			
			// 填入数据
			myChart.setOption(option);
		});
	</script>
</body>
</html>